<style lang="scss" scoped>
.virBox {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-y: auto;
  .contentBox {
    width: 100vw;
    position: absolute;
    top: 55px;
    left: 0;
    .item {
      width: 100vw;
      height: 115px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      line-height: 60px;
    }
  }
}
</style>
<template>
  <div class="virBox" @scroll="scroll">
    <homeTop :showicon2="true" :showbar="true"></homeTop>
    <!-- 最大的盒子 -->
    <div class="bigBox" :style="{ height: config.totalHeight + 'px' }"></div>
    <!-- 内容的盒子 -->
    <div class="contentBox" :style="{ transform: `translateY(${scrollTopref}px)` }">
      <div class="item" v-for="item in rendlist" :key="item.id">
        <img :src="item.thumbnail" alt="" style="width: 100px; height: 90px; float: left" />
        {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { getFindInfor } from '../../api/index'
import homeTop from '@/components/homeTop/index.vue'

//可视区（页面的高度）
const currentHeight = document.documentElement.clientHeight
// 每个盒子高度
const itemHeight = 115
//我一个页面可以放几个
const itemNum = Math.ceil(currentHeight / itemHeight)

const tabId = localStorage.getItem('tabId')
const plateId: any = ref(tabId)
console.log(plateId)
const page = ref(1)

const FindInforData = ref([] as any[])
const getFinList = async () => {
  const { data: res } = await getFindInfor({
    plateId: plateId.value,
    page: page.value,
    count: 20
  })
  console.log(res, 'getFinList')
  FindInforData.value = res.result
}
getFinList()

//创建数据，渲染到页面
const list = new Array(20).fill(0).map((item, index) => {
  return {
    id: index,
    name: `第${index}个盒子`
  }
})

//截取开始下标+结束小标 来截取数据
const rendlist = computed(() => {
  return FindInforData.value.slice(config.startIndex, config.endIndex)
})
console.log(FindInforData.value, 'aa')

//需要定义的参数
const config = reactive({
  startIndex: 0, //开始下标
  endIndex: 0, //结束小标
  totalHeight: 0 //总高度
})
onMounted(() => {
  //计算一下总高度，给最大盒子赋值
  config.totalHeight = list.length * itemHeight
  config.endIndex = config.startIndex + itemNum
})
//偏移量 初始值
const scrollTopref = ref(0)
//超出我的盒子就开始滚动
const scroll = (e: any) => {
  //获取滚动条距离顶部的高度
  const scrollTop = e.target.scrollTop
  console.log(scrollTop)
  //计算开始下标
  config.startIndex = Math.floor(scrollTop / itemHeight)
  //计算结束下标
  config.endIndex = config.startIndex + itemNum
  //偏移量的计算
  scrollTopref.value = config.startIndex * itemHeight
}
</script>
